.jujiBox {
  @apply absolute z-10 bg-bg25 opacity-90 py-4 pl-4 flex flex-col rounded-lg;
  width: 18.75rem;
  height: 35rem;
  bottom: 3.75rem;
  right: 3.375rem;

  .liveTitle {
    @apply font-medium text-lg mb-5;
    line-height: 1.125rem;
    color: #999999;
  }

  .jujiContent {
    @apply w-full overflow-y-auto flex-1 pr-4;

    &::-webkit-scrollbar {
      @apply w-1;
    }

    &::-webkit-scrollbar-thumb {
      @apply rounded;
      background-color: #4c4c4c;
    }

    .jujiItem {
      @apply flex bg-bg25 rounded items-center;
      height: 3.75rem;
      border: 1px solid rgba(255, 255, 255, 0.2);

      &:not(:last-child) {
        margin-bottom: 0.625rem;
      }

      &.jujiActive {
        &:hover {
          border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .liveRight {
          .liveName {
            @apply text-theme;
          }
        }
      }

      &:hover {
        border: 2px solid #ffffff;
      }

      .img {
        height: 3.125rem;
        width: 5.5rem;
        margin-right: 0.9375rem;
      }

      .liveRight {
        @apply flex-1 h-full flex items-center justify-between overflow-hidden;
        background-image: url('/images/live-right-bg.webp');
        background-size: 100% 100%;

        .liveName {
          @apply text-white-80 mr-1 flex-1;
        }

        .liveIcon {
          @apply shrink-0 h-5 w-5 mr-2;
        }

        .living {
          @apply shrink-0 mr-2;
        }
      }
    }
  }
}
